<template>
	<view class="main">
		<u-navbar :title="state.title" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#F5F5F5">
		</u-navbar>
		<view class='dui' v-if="state.dui==1">
			<text>手机号</text>
			<input type="text" placeholder="请输入手机号" v-model="state.phone">
		</view>
		<view class='dui' v-else>
			<text>兑换码</text>
			<input type="text" placeholder="请输入兑换码" v-model="state.duiId">
		</view>
		<view class="butLi" @click="getDui">
		    立即兑换
		</view>
		<view class="buc">
			补充说明：
		</view>
		<view class="duiHuan">
			<u-parse :content="state.center"></u-parse>
			<!-- 1、兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则<br> 2、兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规<br> 3、兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则 -->
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const state = reactive({
		duiId:'',//兑换码
		center:'',
		dui:'',//1：手机号
		phone:'',//手机号兑换码
		title:'口令兑换'
	});
	onLoad((options) => {
		state.dui=options.dui
		if(options.dui==1){
			state.title='兑换解锁次数'
		}
		getConfigSet()
	});
	//兑换规则
	async function getConfigSet() {
		const {code,data} = await sheep.$api.test.configSet({
			config:'exchange_rule',
		})
		if (code == 1) {
		   state.center=data
		}
	}
	async function getDui() {
		if(state.dui==1){
			const {code,data,msg} = await sheep.$api.user.addMobile({
				token:uni.getStorageSync('token'),
				phone:state.phone
			})
			if (code == 1) {
			   uni.showToast({
			   	title: msg,
			   	icon: "none",
			   	mask: true,
			   	duration: 2000
			   })
			}else{
				uni.showToast({
					title: msg,
					icon: "none",
					mask: true,
					duration: 2000
				})
			}
		}else{
			const {code,data,msg} = await sheep.$api.user.exchangeCode({
				token:uni.getStorageSync('token'),
				code:state.duiId
			})
			if (code == 1) {
			   uni.showToast({
			   	title: msg,
			   	icon: "none",
			   	mask: true,
			   	duration: 2000
			   })
			}else{
				uni.showToast({
					title: msg,
					icon: "none",
					mask: true,
					duration: 2000
				})
			}
		}
		
	}
	
	function getLeft(){
		uni.navigateBack({
			delta:1,//返回层数，2则上上页
		})
	}
</script>
<style  lang="scss">
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
		.main {
			height: 100%;
			width: 100%;
			background-color: #F5F5F5;
		}
		.dui{
		    width:calc(100% - 48rpx);
		    padding:24rpx;
		    background: #fff;
			margin: 20rpx 0; 
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			input{
				text-align: right;
			}
		}
		.butLi{
			width: calc(100% - 64rpx);
			margin:60rpx auto;
			background: #1BDDD0;
			font-size:32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 54rpx;
		}
		.buc{
			width:calc(100% - 64rpx);
			margin: 20rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.duiHuan{
			width: calc(100% - 64rpx);
			margin:20rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 50rpx;
		}
   }
   
</style>
